<template>
	<view class="live">
		<view class="nav nav_bar" style="background: #1D243E">
			<uni-nav-bar left-icon="left" :title="data.user_info ? data.user_info.nickname : ''" :border='false'
				color="#FFF" background-color="#1D243E" @clickLeft="$native.backAction()"></uni-nav-bar>
		</view>
		<view class="nav_box"></view>

		<view class="tags flex_center">
			<view class="left">
				<view class="level flex_center">
					<view class="level_num">
						Lv.{{ level_info.name || 0 }}
					</view>
					<!-- <view class="level_tags">
						成为人气玩家
					</view> -->
				</view>

				<view class="progress_num">
					{{ data.value && data.value > 0 ? Number(data.value).toFixed(0) : 0 }}
					{{ last_level_info.value ? ` / ${Number(last_level_info.value).toFixed(0)}` : '' }}
				</view>

				<view class="progress_line">
					<view class="progress_line_haved" v-if="last_level_info.value"
						:style="`width: ${
						data.value / last_level_info.value * 472
					}rpx;background: linear-gradient(120deg, ${hashToRgba(level_info.bgc,0.4)} 0%, ${hashToRgba(level_info.bgc,0.8)} 51%, ${hashToRgba(level_info.bgc,1)} 100%);`">
					</view>

					<view class="progress_line_haved" v-else
						:style="`width: 100%;background: linear-gradient(120deg, ${hashToRgba(level_info.bgc,0.4)} 0%, ${hashToRgba(level_info.bgc,0.8)} 51%, ${hashToRgba(level_info.bgc,1)} 100%);`">
					</view>
				</view>

				<view class="next_text" v-if="last_level_info.value">
					距离升级还差 {{
						(Number(last_level_info.value) - Number(data.value)).toFixed(0)
					}} 财富值
				</view>
			</view>

			<view class="right">
				<image :src="level_info.icon" mode="aspectFill"></image>
			</view>
		</view>

		<view class="grid">

			<view class="h1">我的特权</view>

			<view class="h2" :style="`color: ${level_info.bgc || '#C9BAFF'};`">充值升级等级，开启更多特权</view>

			<view class="list" v-if="level_info.config && level_info.config.length">
				<u-grid :border="false">
					<u-grid-item v-for="(item,index) in level_info.config" :key="index">
						<view class="box flex_c">

							<view class="image flex_r_around">
								<view class="nickname flex_center" v-if="item.type == 2">
									<image :src="level_info.little_bgm" mode="widthFix"></image>
									<marquee scrollamount="3" behavior="scroll" direction="left" algin="center">
										{{ data.user_info ? data.user_info.nickname : '' }}
									</marquee>
								</view>
								<image :src="item.image" mode="widthFix" v-else></image>
							</view>

							<view class="title">{{
								item.type == 1 ? '专属徽章'
								: item.type == 2 ? '炫彩昵称'
								: item.type == 3 ? '头像框'
								: item.type == 4 ? '特权礼物'
								: item.type == 5 ? '升级飘屏'
								: item.type == 6 ? '进场欢迎'
								: ''
							}}</view>

							<view class="text" v-if="item.type == 4">
								LV.{{ level_info.name || 0 }}解锁{{ getGiftLength(item.bgc) }}个</view>
							<view class="text" v-else>LV.{{ level_info.name || 0 }}点亮</view>

							<view class="lock flex_r_around"
								v-if="!level_info.name || level_info.name == 0 || level_info.name == ''">
								<u-icon name="lock-fill" color="#FFF" size="32rpx"></u-icon>
							</view>

						</view>
					</u-grid-item>
				</u-grid>
			</view>
			
			<view class="list" v-else>
				<u-grid :border="false">
					<u-grid-item v-for="(item,index) in default_config" :key="index">
						<view class="box flex_c">
			
							<view class="image flex_r_around">
								<view class="nickname flex_center" v-if="item.type == 2">
									<image :src="level_info.little_bgm" mode="widthFix"></image>
									<marquee scrollamount="3" behavior="scroll" direction="left" algin="center">
										{{ data.user_info ? data.user_info.nickname : '' }}
									</marquee>
								</view>
								<image :src="item.image" mode="widthFix" v-else></image>
							</view>
			
							<view class="title">{{
								item.type == 1 ? '专属徽章'
								: item.type == 2 ? '炫彩昵称'
								: item.type == 3 ? '头像框'
								: item.type == 4 ? '特权礼物'
								: item.type == 5 ? '升级飘屏'
								: item.type == 6 ? '进场欢迎'
								: ''
							}}</view>
			
							<view class="text" v-if="item.type == 4">
								LV.1 解锁2个</view>
							<view class="text" v-else>LV.1点亮</view>
			
							<view class="lock flex_r_around">
								<u-icon name="lock-fill" color="#FFF" size="32rpx"></u-icon>
							</view>
			
						</view>
					</u-grid-item>
				</u-grid>
			</view>

		</view>

		<richVue></richVue>

		<wLoading ref="loading"></wLoading>
	</view>
</template>

<script>
	import wLoading from "@/components/w-loading/w-loading.vue";
	import richVue from "./rich.vue";
	export default {
		data() {
			return {
				data: {},
				last_level_info: {},
				level_info: {},
				default_config: [],
				
				user_id: 0,
			}
		},
		components: {
			wLoading,
			richVue
		},
		methods: {

			getCurrentLevel() {
				this.$nextTick(() => {
					this.$refs.loading.open();
				});
				this.$get('/v2.user_level/getCurrentLevel', {
					user_id: this.user_id
				}, true, (res) => {
					this.$refs.loading.close();
				}).then(res => {
					this.$nextTick(() => {
						this.$refs.loading.close();
					});
					this.data = res.data;
					this.last_level_info = res.data.last_level_info;
					this.level_info = res.data.level_info;
					this.default_config = res.data.default_config;
				});
			},

			// 哈希 转 rgba
			hashToRgba(color, opt) {
				let color1, color2, color3;
				color = '' + color;
				if (typeof color !== 'string') return;
				if (color.charAt(0) == '#') {
					color = color.substring(1);
				}
				if (color.length == 3) {
					color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
				}
				if (/^[0-9a-fA-F]{6}$/.test(color)) {
					color1 = parseInt(color.substr(0, 2), 16);
					color2 = parseInt(color.substr(2, 2), 16);
					color3 = parseInt(color.substr(4, 2), 16);
					return 'rgb(' + color1 + ',' + color2 + ',' + color3 + ',' + opt + ')';
				}
			},

			toRichText() {
				this.$util.toUrl('/pages/live/rich');
			},

			getGiftLength(str) {

				if (!str) {
					return 0;
				}

				if (str.indexOf(',') > -1) {
					var arr = str.split(',');
					return arr.length;
				}

				if (str.indexOf(',') == -1) {
					return 1;
				}

			},

		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.user_id = option.user_id || 0;
			this.getCurrentLevel();
		}
	}
</script>

<style lang="less" scoped>
	.live {
		min-height: 100vh;
		background: linear-gradient(180deg, #1D243E 0%, #17161E 100%);
		padding: 32rpx;
	}

	.tags {

		.left {
			flex: 1;

			.level {
				align-items: flex-end;

				.level_num {
					font-weight: 600;
					font-size: 60rpx;
					color: #FFFFFF;
					line-height: 60rpx;
					margin-right: 12rpx;
				}

				.level_tags {
					padding: 4rpx 14rpx;
					background: linear-gradient(120deg, #AB93FF 0%, #896AF4 51%, #9070FF 100%);
					border-radius: 20rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 32rpx;
				}
			}

			.progress_num {
				font-weight: 600;
				font-size: 28rpx;
				color: #FBFF82;
				margin: 48rpx 0 16rpx;
			}

			.progress_line {
				width: 472rpx;
				height: 16rpx;
				background: #3E3D41;
				border-radius: 8rpx;

				.progress_line_haved {
					width: 0rpx;
					transition: 1s;
					height: 16rpx;
					border-radius: 8rpx;
				}

			}

			.next_text {
				font-size: 24rpx;
				color: #CCCCCC;
				line-height: 34rpx;
				margin-top: 8rpx;
			}

		}

		.right {
			width: 120rpx;
			height: 88rpx;

			image {
				width: 120rpx;
				height: 88rpx;
			}
		}

	}

	.grid {

		/deep/ .u-grid-item--hover-class {
			opacity: 1;
		}

		margin-top: 40rpx;

		.h1 {
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 50rpx;
		}

		.h2 {
			font-weight: 600;
			font-size: 24rpx;
			color: #C9BAFF;
			line-height: 28rpx;
			margin: 12rpx 0 32rpx;
		}

		.list {
			.box {
				margin-bottom: 32rpx;
				position: relative;

				.lock {
					width: 208rpx;
					height: 208rpx;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 24rpx;
					position: absolute;
					top: 0;
					left: 0;
				}

				.image {
					width: 208rpx;
					height: 208rpx;
					border-radius: 24rpx;
					overflow: hidden;
					background: linear-gradient(180deg, #24253A 0%, #1A1D2E 100%);

					image {
						width: 160rpx;
					}

					.nickname {
						width: 168rpx;
						height: 48rpx;
						background: #2C304B;
						border-radius: 8rpx;
						padding: 0 10rpx;
						overflow: hidden;

						image {
							width: 64rpx;
							margin-right: 4rpx;
						}

						marquee {
							flex: 1;
							font-weight: 500;
							font-size: 20rpx;
							color: #FFE545;
							line-height: 28rpx;
						}
					}

				}

				.title {
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					margin: 16rpx 0 2rpx;
				}

				.text {
					font-size: 24rpx;
					color: #666666;
					line-height: 34rpx;
				}
			}
		}
	}
</style>